<!--region 封装的分页 table-->
<template>
	<div class="table" v-loading="options.loading">
		<el-table
			id="HTable"
			ref="mutipleTable"
			:data="list"
      size="large"
			:stripe="options.stripe"
			:border="options.border"
			:header-cell-style="{background:'#F2F3F5', color: '#8F9BB3',height:'50px'}"
			@selection-change="handleSelectionChange"
			@sort-change="handleChangeTableSort"
		>
			<!--region 选择框-->
			<el-table-column v-if="options.mutiSelect" type="selection" fixed="left" width="55" align="center"></el-table-column>
			<el-table-column v-if="showIndex" type="index" label="#" width="55" align="center"></el-table-column>
			<!--endregion-->

			<!--region 数据列-->
			<template v-for="(column, index) in columns" :key="column.prop">
				<el-table-column
					header-align="center"
					align="center"
					:prop="column.prop"
					:label="column.label"

					:fixed="column.fixed"
					:min-width="column.width"
					:sortable="column.sortable || false"
					:show-overflow-tooltip="column.tooltip || false"
				>
					<template v-slot="scope">
						<template v-if="column.formatter">
							<span v-html="column.formatter(scope.row, column)"></span>
						</template>
						<template v-else>
							<span>{{scope.row[column.prop]}}</span>
						</template>
					</template>
				</el-table-column>
			</template>
			<!--endregion-->

			<!--region 按钮操作组-->
			<template v-if="operates">
				<el-table-column
					ref="fixedColumn"
					header-align="center"
					align="center"
					:label="operates.label || '操作'"
					:width="operates.width"
					:fixed="operates.fixed"
				>
					<template v-slot="scope">
						<div class="operate-group">
							<template v-for="(btn, key) in operates.list">
								<div class="item" v-if="btn.show" :key="btn.id">
									<el-button
										:link="btn.link||false"
										:text="btn.text||false"
										:type="btn.type"
										:icon="btn.icon"
										:disabled="btn.disabled"
										:plain="btn.plain"
										@click.native.prevent="btn.method(key, scope.row)"
									>
										{{ btn.label }}
									</el-button>
								</div>
							</template>
						</div>
					</template>
				</el-table-column>
			</template>
			<!--endregion-->
			<slot></slot>
		</el-table>
	</div>
</template>

<script setup name="HTable">
const emit = defineEmits()

const props = defineProps({
	// table 表格的控制参数
	showIndex: {
		type: Boolean,
		default: () => true
	},
	list: { // 数据列表
		type: Array,
		default: () => []
	},
	columns: { // 需要展示的列 === prop：列数据对应的属性，label：列名，align：对齐方式，width：列宽
		type: Array,
		default: () => []
	},
	operates: { // 操作按钮组 === label: 文本，type :类型（primary / success / warning / danger / info / text），show：是否显示，icon：按钮图标，plain：是否朴素按钮，disabled：是否禁用，method：回调方法
		type: [Object, Boolean],
		default: () => false
	},
	options: {
		type: Object,
		default: () => {
			return {
				stripe: true,
                border: true,
				loading: false,
				mutiSelect: false,
				highlightCurrentRow: false,
			}
		}
	}
})

const multipleSelection = ref([])

// 多行选中
const handleSelectionChange = (val)=> {
	multipleSelection.value = val;
    emit("handleSelectionChange", val)
}

// 排序
const handleChangeTableSort = (obj)=> {
	let sort = '';
	if (obj.order === "ascending") {
		sort = "+" + obj.prop;
	} else if (obj.order === "descending") {
		sort = "-" + obj.prop;
	} else {
		sort = '';
	}
    emit("handleChangeTableSort", sort);
}
</script>

<style lang="less" scoped>
.item {
	display: inline-block;
	margin-right: 8px;
}
.item:last-child {
	margin-right: 0;
}
</style>
